<!-- 
Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。在 Vue 3 中，Vue Router 提供了灵活的路由配置和强大的导航功能。以下是关于 Vue 3 Router 的说明总结：
  1. 安装 Vue Router
  首先，需要安装 Vue Router。可以通过 npm 或 yarn 安装：
  npm install vue-router@4
  2. 创建路由实例
  在 Vue 3 中，创建路由实例的基本步骤如下：
   1. 定义路由
  路由配置是一个数组，每个路由对象都包含路径和组件。
  import { createRouter, createWebHistory } from 'vue-router';
  import Home from './components/Home.vue';
  import About from './components/About.vue';

  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ];
   2. 创建路由实例
  使用  `createRouter`  创建路由实例，并指定路由模式（如  `createWebHistory` ）。
  const router = createRouter({
    history: createWebHistory(),
    routes
  });
  3. 在应用中使用 Vue Router

  将路由实例传递给 Vue 应用。
  import { createApp } from 'vue';
  import App from './App.vue';

  const app = createApp(App);
  app.use(router); // 使用 Vue Router
  app.mount('#app');
  4. 路由视图
  在组件模板中使用  `<router-view>`  来渲染匹配的组件。
  vue
  <template>
    <div>
      <router-view></router-view>
    </div>
  </template>
  5. 导航
   1. 编程式导航
  使用  `router.push`  或  `router.replace`  方法进行编程式导航。
  router.push('/about'); // 导航到 About 页面
   2. 声明式导航
  使用  `<router-link>`  组件进行声明式导航。
  vue
  <template>
    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
  </template>
  6. 路由守卫
  路由守卫用于控制路由的访问权限，可以在路由配置中定义全局守卫、路由独享守卫和组件内守卫。

   示例：全局守卫
  router.beforeEach((to, from) => {
    // 在路由跳转前执行
  });
  7. 动态路由和嵌套路由
   1. 动态路由
  可以使用动态参数定义路由。
  { path: '/user/:id', component: User }
   2. 嵌套路由
  支持嵌套路由，可以在子路由中定义子组件。
  const routes = [
    {
      path: '/about',
      component: About,
      children: [
        { path: 'team', component: Team },
        { path: 'company', component: Company }
      ]
    }
  ];
  8. 路由元信息
  可以在路由配置中添加  `meta`  字段，用于存储路由的元信息，如权限、标题等。
  { path: '/about', component: About, meta: { requiresAuth: true } }
  总结
  Vue 3 Router 是构建单页面应用的强大工具，提供了灵活的路由配置、导航功能和路由守卫。通过理解和掌握 Vue Router 的基本用法，可以有效地管理应用的页面导航和访问控制，提高用户体验。 
-->
<template>
  <div class="app">
    <h2>1. router-link路由跳转</h2>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/login">Login</router-link>
    <router-link to="/user/12345">User1</router-link>
    <router-link to="/user/8766">User2</router-link>
    <router-link to="/user/99001">User3</router-link>

    <h2>2. 路由编程导航跳转</h2>
    <!-- 其他元素跳转 -->
    <span @click="homeSpanClick">首页</span>
    <button @click="aboutBtnClick">关于</button>
    
    <router-view></router-view>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  // 监听元素的点击
  function homeSpanClick() {
    // 跳转到首页
    // router.push("/home")
    router.push({
      // name: "home"
      path: "/home"
    })
  }
  function aboutBtnClick() {
    // 跳转到关于
    router.push({
      path: "/about",
      query: {
        name: "about-query-arg",
        age: 18
      }
    })
  }
</script>

<style scoped>
  .router-link-active {
    color: red;
    font-size: 20px;
  }

  .active {
    color: red;
    font-size: 20px;
  }
</style>
